<template>
  <div class="sellBook_container">
    <div class="sell_head">
      <div><el-button size="mini" @click="addSell">添加求购</el-button></div>
      <div style="display:flex;">
        <el-input
          v-model="queryInfo.query"
          clearable
          @clear="getSellBooks"
        ></el-input>
        <el-button size="mini" style="margin-left:10px;" @click="searchSellBook"
          >搜索</el-button
        >
      </div>
    </div>
    <div class="sell_content">
      <ul>
        <!-- 标题 -->
        <li class="title">
          <div class="book_name texc">图书信息</div>
          <div class="book_yuanjia texc">图书售价</div>
          <div class="book_num texc">库存量</div>
          <div class="book_remarks texc">备注</div>
          <div class="book_date texc">发布时间</div>
          <div class="book_examine">审核状态</div>
          <div class="book_operation texc">操作</div>
        </li>
        <!-- 内容 -->
        <li class="content" v-for="(item, index) in bookSellArr" :key="index">
          <div class="book_name">
            <img :src="baseURL + item.book_cover" alt="" />
            <span>{{ item.book_name }}</span>
          </div>
          <div class="book_xianjia texc">
            <span>￥{{ item.book_price_xianjia }}</span>
          </div>
          <div class="book_num texc">
            <span>{{ item.book_num }}</span>
          </div>
          <div class="book_remarks texc">
            <span>{{ item.book_remarks }}</span>
          </div>
          <div class="book_date texc">
            <span>{{ item.book_date }}</span>
          </div>
          <div class="book_examine texc">
            <span>{{ item.book_examine }}</span>
          </div>
          <div class="book_operation texc">
            <el-button size="mini" @click="deleteSellBook(item.book_id)"
              >下架</el-button
            >
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      queryInfo: {
        query: ''
      },
      bookSellArr: [],
      baseURL: 'http://127.0.0.1:3000/'
    }
  },
  created() {
    this.getSellBooks()
  },
  methods: {
    // 添加求购
    addSell() {
      this.$router.push('/sell')
    },
    // 搜索
    async searchSellBook() {
      this.queryInfo.username = this.getUser
      const { data: res } = await this.$http.get('book/getBookBySellName', {
        params: this.queryInfo
      })
      if (res.code !== 200) return this.$message.error('搜索失败')
      this.bookSellArr = res.data
    },
    // 获取求购书籍
    async getSellBooks() {
      const { data: res } = await this.$http.get(
        '/book/getBookBySeller' + '/' + this.getUser
      )
      if (res.code !== 200) return this.$message.error('获取求购书籍失败')
      this.bookSellArr = res.data
      this.bookSellArr.forEach(item => {
        switch (item.book_examine) {
          case 0:
            item.book_examine = '待后台审核'
            break
          case 1:
            item.book_examine = '审核通过'
            break
          case 2:
            item.book_examine = '审核未通过'
            break
        }
      })
      console.log(this.bookSellArr)
    },
    // 下架书籍
    async deleteSellBook(bookId) {
      const confirmResult = await this.$confirm('确定下架该图书?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') return this.$message.info('已取消下架')
      const { data: res } = await this.$http.put('book/examineBook', {
        book_examine: 0,
        book_id: bookId
      })
      if (res.code !== 200) return this.$message.error('下架失败')
      this.$message.success('下架成功')
      this.getSellBooks()
    }
  },
  computed: {
    ...mapGetters('user', ['getUser'])
  }
}
</script>

<style lang="scss" scoped>
.sellBook_container {
  .sell_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #ccc;
    padding: 10px;
    .el-button {
      background-color: rgb(210, 172, 107);
      color: #fff;
      font-size: 15px;
      font-weight: bold;
      border-radius: 0px;
    }
    /deep/ .el-input__inner {
      border-radius: 0px;
      height: 30px;
    }
  }
  .sell_content {
    // 标题
    .title {
      display: flex;
      height: 30px;
      line-height: 30px;
      background-color: #ccc;
      font-size: 14px;
      color: rgb(107, 107, 107);
    }
    // 内容
    .content {
      display: flex;
      height: 65px;
      line-height: 65px;
      border-bottom: 1px solid #ccc;
      background-color: #fff;
      font-size: 12px;
      color: #777;
    }
  }
}
.texc {
  text-align: center;
}
.book_name {
  width: 200px !important;
  img {
    width: 46px;
    height: 56px;
  }
}
.book_num {
  width: 80px;
}
.book_remarks {
  width: 105px;
}
.book_date {
  width: 100px;
}
.book_examine {
  width: 80px;
}
.book_operation {
  width: 50px;
}
</style>
